<template>
  <div>
    <el-container>
      <el-main style="padding:0;">
        <!-- 充值提现 -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            账户管理
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>通道代付交易
          </p>
          <div class="sousuojg6_10">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="通道编号">
                <el-input v-model="formInline.channelCode" placeholder="请输入通道编号"></el-input>
              </el-form-item>
              <el-form-item label="通道名称">
                <el-input v-model="formInline.channelName" placeholder="请输入通道名称"></el-input>
              </el-form-item>
              <el-form-item label="通道类型" v-if="jurisdiction == 2">
                <el-select v-model="formInline.channelType" clearable placeholder="请选择">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="代付" value="1"></el-option>
                  <el-option label="支付" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间" v-if="jurisdiction == 0">
                <el-date-picker
                  v-model="dataTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
              <el-form-item style="float: right;height: 0px;margin-top: 0px">
                <el-button
                  style="margin-left: 10px"
                  type="primary"
                  @click="reset"
                  icon="el-icon-refresh-left"
                  class="btn"
                >重置</el-button>
                <el-button
                  type="primary"
                  @click="queryPayActiveList"
                  icon="el-icon-search"
                  class="btn"
                >搜索</el-button>
              </el-form-item>
            </el-form>
          </div>

          <p class="shopList">
            <span>
              <!-- <el-button type="primary" @click="activity(1)" class="elbtn">创建</el-button> -->
            </span>
          </p>

          <div class="mt20"></div>
          <el-table
            :data="tableData"
            border
            height="480"
            :header-cell-style="{background:'#DCDCDC',color:'#222'}"
            style="width: 100%"
            ref="multipleTable"
          >
            <el-table-column type="selection"  align="center" min-width="40"></el-table-column>
            <el-table-column show-overflow-tooltip prop="orderCode" align="center" min-width="250" label="订单号"></el-table-column>

            <el-table-column
            show-overflow-tooltip
              prop="dealMoney"
              align="center"
              min-width="100"
              label="提现金额"
              v-if="jurisdiction == 0"
            ></el-table-column>
            <el-table-column
              prop="dealMoney"
              align="center"
              min-width="120"
              label="手续费率（%）"
              v-if="jurisdiction == 0"
            ></el-table-column>

            <el-table-column
            show-overflow-tooltip
              prop="dealMoney"
              align="center"
              min-width="100"
              label="代付金额"
              v-if="jurisdiction == 2"
            ></el-table-column>

            <el-table-column show-overflow-tooltip prop="serviceCharge" align="center" min-width="150" label="手续费（元/笔）"></el-table-column>
            <el-table-column show-overflow-tooltip prop="realityMoney" align="center" min-width="100" label="应到账金额"></el-table-column>
            <el-table-column show-overflow-tooltip prop="officeCost" align="center" min-width="120" label="机构成本"></el-table-column>
            <el-table-column
              prop="officeProfit"
              align="center"
              min-width="120"
              label="机构收益"
              v-if="jurisdiction == 2"
            ></el-table-column>
            <el-table-column show-overflow-tooltip prop="channelName" align="center" min-width="120" label="通道名称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="channelCost" align="center" min-width="120" label="通道成本"></el-table-column>
            <el-table-column show-overflow-tooltip prop="companyProfit" align="center" min-width="120" label="我司收益"></el-table-column>
            <el-table-column show-overflow-tooltip prop="channelOrderCode" align="center" min-width="200" label="通道流水号"></el-table-column>

            <el-table-column
              prop="officeName"
              align="center"
              show-overflow-tooltip
              min-width="120"
              label="机构名称"
              v-if="jurisdiction == 0"
            ></el-table-column>

            <el-table-column
              prop="oemName"
              align="center"
              show-overflow-tooltip
              min-width="150"
              label="归属OEM机构"
              v-if="jurisdiction == 2"
            ></el-table-column>
            <el-table-column
              prop="officeName"
              align="center"
              min-width="150"
              label="下属机构名称"
              v-if="jurisdiction == 2"
            ></el-table-column>

            <el-table-column show-overflow-tooltip prop="officeUid" align="center" min-width="250" label="机构ID"></el-table-column>
            <el-table-column show-overflow-tooltip prop="phone" align="center" min-width="120" label="机构电话"></el-table-column>
            <el-table-column show-overflow-tooltip prop="accountName" align="center" min-width="150" label="结算账户名"></el-table-column>
            <el-table-column show-overflow-tooltip prop="accountNo" align="center" min-width="150" label="结算帐号"></el-table-column>
            <el-table-column show-overflow-tooltip prop="bankName" align="center" min-width="200" label="提现账户银行"></el-table-column>
            <el-table-column show-overflow-tooltip align="center" min-width="300" label="代付时间">
              <template slot-scope="scope">{{scope.row.createDate}} - {{scope.row.createDate}}</template>
            </el-table-column>
            <el-table-column prop="productNum" align="center" min-width="200" label="代付状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">成功</span>
                <span v-if="scope.row.status == 1">失败</span>
                <span v-if="scope.row.status == 2">待审核</span>
                <span v-if="scope.row.status == 3">出款中</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" align="center" min-width="300" label="备注"></el-table-column>
            <!-- <el-table-column align="center" min-width="100" label="状态">
          <template slot-scope="scope">
            <span v-if='scope.row.status == 0'>未上线</span>
            <span v-if='scope.row.status == 1'>已上线</span>
            <span v-if='scope.row.status == 2'>已过期</span>
            <span v-if='scope.row.status == 3'>已停用</span>
          </template>
            </el-table-column>-->
          </el-table>
          <div
            class="filter-container"
            style="float: left; text-align: left; font-size: 16px; color: rgb(31, 165, 243); cursor: pointer; width: auto;margin-top:20px; "
          >
            <el-checkbox v-model="checkedAll" @change="selAll">全选</el-checkbox>
          </div>
          <div
            @click="payActiveListExport" 
            class="filter-container"
            style="margin-left:20px;float: left; text-align: left; font-size: 16px; color: rgb(31, 165, 243); cursor: pointer; width: auto;margin-top:20px"
          >批量导出</div>
          <div style="clear: both;"></div>
          <el-pagination
            background
            style="text-align: right;"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-size="formInline.number"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[20, 50, 100]"
            :total="totalNum"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
export default {
  data() {
    return {
      formInline: {
        oemUid:
          localStorage.getItem("jurisdiction") == 0
            ? localStorage.getItem("uid")
            : "",
        activeName: "",
        status: "",
        startDate: "",
        endDate: "",
        page: 1,
        number: 20,
      },
      dataTime: [],
      jurisdiction: localStorage.getItem("jurisdiction"),
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      checkedAll: false,
    };
  },
  components: {
  },
  mounted() {
    this.queryPayActiveList();
  },
  methods: {
    
    // 重置
    reset() {
      this.formInline.channelCode = "";
      this.formInline.channelName = "";
      this.formInline.channelType = "";
      this.formInline.oemName = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.mechanism = "";
      this.dataTime = [];
      this.formInline.page=1
      this.queryPayActiveList();
    },
    queryPayActiveList() {
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      https.queryChannelDeal(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          this.listLoading = false;
          return;
        }
        this.tableData = res.data.data;
        this.totalNum = res.data.total;
        this.listLoading = false;
      });
    },
    // 批量下载
    payActiveListExport() {
       var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url:"api/active/payActiveList/excel/export",
          responseType: "blob",
          data: _this.formInline,
        })
        .then(function (d) {
          let blob = new Blob([d.data], { type: "application/vnd.ms-excel" });
          /*let objectUrl = URL.createObjectURL(blob);
                        window.location.href = objectUrl;*/

          var date = new Date();

          var year = date.getFullYear();

          var month = date.getMonth() + 1;
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          var second = date.getSeconds();
          date =
            year +
            "" +
            month +
            "" +
            day +
            "" +
            hour +
            "" +
            minute +
            "" +
            second; //'+date+'

          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "通道代付交易列表" + date + ".xls"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
      // window.location.href = this.GLOBAL.httpurl + `/api/active/payActiveList/excel/export?${qs.stringify(this.formInline)}`;
    },
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.queryPayActiveList();
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
    eventsuccess() {
      bus.$on("eventsuccess", (res) => {
        this.eventShow = res;
      });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.tableData.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
};
</script>
<style scoped>
.elbtn {
  margin-left: 80%;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  float: right;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.contbox6_10 {
  width: 96%;
  margin-left: 2%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  border-radius: 5px;
}
</style>
